<ion-content>
    <div class="top">
        <div class="vip-card">
            <ion-list style="margin-bottom:0;">
                <ion-item style="border:none;">
                    <ion-avatar item-left>
                        <img [src]="fan?.head_img" alt="">
                    </ion-avatar>
                    <h2>    
                        {{fan?.nick_name}}
                        <span class="sex-icon">
                            <ion-icon [name]="setGenderIcon(fan?.sex)" [color]="setGenderColor(fan?.sex)"></ion-icon>
                        </span>
                    </h2>
                </ion-item>
            </ion-list>
            <ion-grid>
                <ion-row>
                    <ion-col width-50 class="member">
                        <h3>会员号</h3>
                        <p>{{fan?.member_id}}</p>
                    </ion-col>
                    <ion-col width-50 class="today">
                        {{month}}. <span class="day">{{day}}</span>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
    </div>
    <ion-grid class="fun">
        <ion-row>
            <ion-col width-50 class="todo" (click)="canSignup(fan?.role)">
                <ion-icon name="alarm"></ion-icon>
                <div class="fun-title">去签到</div>
            </ion-col>
            <ion-col width-50 class="todo" (click)="canEditProfile(fan?.role)">
                <ion-icon name="build"></ion-icon>
                <div class="fun-title">个人资料</div>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-grid class="statistics">
        <ion-row>
            <ion-col width-33>
                <h6>积分</h6>
                <p>{{growup?.integral}}</p>
            </ion-col>
            <ion-col width-33>
                <h6>等级</h6>
                <p>{{growup?.grade}}</p>
            </ion-col>
            <ion-col width-33>
                <h6>经验值</h6>
                <p>{{growup?.experience}}</p>
            </ion-col>
        </ion-row>
    </ion-grid>
    <div class="split-bar">
        <ion-list-header>便民服务</ion-list-header>
        <ion-grid class="pub-serve">
            <ion-row>
                <ion-col width-33 (click)="goToPhoto()">
                    <img src="./assets/service/camera.png" class="ser-ico">
                    <p>我的证照</p>
                </ion-col>
                <ion-col width-33 (click)="goToQueue()">
                    <img src="./assets/service/queue.png" class="ser-ico">
                    <p>我的排队</p>
                </ion-col>
                <ion-col width-33>
                    <img src="./assets/service/more.png" class="ser-ico">
                    <p>更多</p>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
    <ion-list>
        <ion-item class="list-item"  [navPush]="creditsPage" [navParams]="integralParam">
            <ion-icon name="cash" item-left color="greyblue"></ion-icon>
            个人积分详情
            <ion-note item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </ion-note>
        </ion-item>
        <ion-item class="list-item" [navPush]="levelPage" [navParams]="levelParam">
            <ion-icon name="information-circle" item-left color="greyblue"></ion-icon>
            会员权益说明
            <ion-note item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </ion-note>
        </ion-item>
        <!--<ion-item class="list-item" [navPush]="missionPage">
            <ion-icon name="paper" item-left color="greyblue"></ion-icon>
            我的成长任务
            <ion-note item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </ion-note>
        </ion-item>-->
        <ion-item class="list-item">
            <ion-icon name="card" item-left color="greyblue"></ion-icon>
            会员积分商城
            <ion-note item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </ion-note>
        </ion-item>
        <!--<ion-item class="list-item">
            <ion-icon name="basket" item-left color="greyblue"></ion-icon>
            我的商家
            <ion-note item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </ion-note>
        </ion-item>-->
        <ion-item class="list-item">
            <ion-icon name="contact" item-left color="greyblue"></ion-icon>
            关于小市
            <ion-note item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </ion-note>
        </ion-item>
        <ion-item class="list-item" [navPush]="settingPage">
            <ion-icon name="settings" item-left color="greyblue"></ion-icon>
            设置
            <ion-note item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </ion-note>
        </ion-item>
    </ion-list>
</ion-content>
